<!doctype html>
<meta name=viewport content="width=device-width, initial-scale=1">
<style>
@keyframes b4-anim {
  0% { opacity: 0; }
  66% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes b3-anim {
  0% { opacity: 0; }
  33% { opacity: 0; }
  66% { opacity: 1; }
  99% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes b2-anim {
  0% { opacity: 0; }
  33% { opacity: 1; }
  66% { opacity: 1; }
  67% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes b1-anim {
  0% { opacity: 1; }
  33% { opacity: 1; }
  34% { opacity: 0; }
  100% { opacity: 0; }
}

body {
  margin: 0;
  background: white;
}

img, div {
  width: 100vmin;
  height: 100vmin;
}

img {
  position: absolute;
  top: 5px;
}

#b1 {
  animation: b1-anim 1s infinite alternate linear;
}

#b2 {
  animation: b2-anim 1s infinite alternate linear;
}

#b3 {
  animation: b3-anim 1s infinite alternate linear;
}

#b4 {
  animation: b4-anim 1s infinite alternate linear;
}
</style>
<div id='container' style='will-change:transform;'>
  <div id='b1'>
   <img style='filter: blur(0px);' src='http://upload.wikimedia.org/wikipedia/en/a/a7/Stanford_Bunny.png'/>
  </div>
  <div id='b2'>
   <img style='filter: blur(4px);' src='http://upload.wikimedia.org/wikipedia/en/a/a7/Stanford_Bunny.png'/>
  </div>
    <div id='b3'>
   <img style='filter: blur(8px);' src='http://upload.wikimedia.org/wikipedia/en/a/a7/Stanford_Bunny.png'/>
  </div>
    <div id='b4'>
   <img style='filter: blur(16px);' src='http://upload.wikimedia.org/wikipedia/en/a/a7/Stanford_Bunny.png'/>
  </div>
</div>
